<template>
  <div class="activity-container">
    <el-form :inline="true"
             ref="configForm"
             :rules="configsRule"
             label-width="200px"
             :model="form" class="demo-form-inline">
      <div class="config-table">
        <el-form-item label="基础条件：当日充值金额" prop="totalRechargeAmount" :rules="strategyRule.highestReward">
            <el-input v-model.number="form.totalRechargeAmount" type="number" placeholder="请输入" @keyup.enter.native="doSave({action: 'saveForm', form: 'configForm'})">
                <template slot="prepend">&gt;=</template>
            </el-input>
        </el-form-item>
      </div>
      <el-button @click="addRowHandler()">增加条件配置</el-button>
      <div>
        <table class="config-table">
          <tr>
            <td width="100">当日体育类流水倍</td>
            <td width="100">返还比例</td>
            <td width="100">最高返还金额</td>
          </tr>
          <tr v-for="(row,index) in form.itemList" :key="index">
            <td width="30%">
              <el-form-item label="" :prop="'itemList.'+index+'.multiple'" :rules="strategyRule.highestReward">
                <el-input v-model.number="row.multiple" type="number" placeholder="请输入" @keyup.enter.native="doSave({action: 'saveForm', form: 'configForm'})">
                  <template slot="prepend">&gt;=</template>
                </el-input>
              </el-form-item>
            </td>
            <td width="30%">
              <el-form-item label="" :prop="'itemList['+index+'].returnProportion'" :rules="strategyRule.returnProportion">
                <el-input v-model.number="row.returnProportion" type="number" placeholder="请输入" @keyup.enter.native="doSave({action: 'saveForm', form: 'configForm'})">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </td>
            <td width="30%">
              <el-form-item label="" :prop="'itemList['+index+'].highestReward'" :rules="strategyRule.highestReward">
                <el-input v-model.number="row.highestReward" type="number" placeholder="请输入" @keyup.enter.native="doSave({action: 'saveForm', form: 'configForm'})"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="delRowHandler(index)">删除</el-button>
              </el-form-item>
            </td>
          </tr>
        </table>
      </div>
      <el-button  type="primary" @click="doSave({action: 'saveForm', form: 'configForm'})">确定</el-button>
      <el-button @click="refreshForm()">取消</el-button>
    </el-form>
  </div>
</template>
<script>
  import {form, factory} from '@/build'
  import {saveSpringRechargeConfig, getSpringRechargeConfig} from '@/services/api/activity'
  export default {
    name: "spring-recharge-config",
    components: {},
    mixins: [form, factory],
    data() {
      return {
        form: {
          itemList: [
            {
              returnProportion: null,
              multiple: null,
              highestReward: null,
            }
          ]
        },
        configsRule:{
          totalRechargeAmount:[
            {required: true,message:'当日充值金额不能为空'}
          ],
          },
        strategyRule: {
          multiple: factory.getRule('multiple'),
          returnProportion: factory.getRule('percent1000'),
          highestReward: factory.getRule('money'),
          // dailyProfit: factory.getRule('money'),
          // totalWithdraw: factory.getRule('money'),
          // dailyTimes: [
          //   {required: true, message: '单日提现次数不能为空'},
          //   {validator: factory.getValidator('nonNegativeInteger')}
          // ],
          // sameIPCheck: [
          //   {required: true, message: '同IP多账号检测为必选项', trigger: 'change'}
          // ],
          // sameDeviceCheck: [
          //   {required: true, message: '同设备多账号检测为必选项', trigger: 'change'}
          // ]
        }
      }
    },
    mounted() {
      //tab页记录访问日志
      this.$store.dispatch(types.SAVE_OPERATION_LOG,{content:_.getContent(this.$route,'活动配置',true)});
      this.bindSave(saveSpringRechargeConfig , 'saveForm', 'form', {});

      this.bindGet(getSpringRechargeConfig, 'form', {
        format: data => {
          this.loading = false;
          let result ;
          if(data){
            // result = {itemList:data.itemList}
            result = data
          }else{
            result = this.form
          }
          return result;
        }
      });
      this.getAll();
    },
    methods: {
      addRowHandler() {
        this.form.itemList = this.form.itemList || []
        this.form.itemList.push({
          multiple: null,
          returnProportion: null,
          highestReward: null,
        })
      },
      delRowHandler(index) {
        this.form.itemList.splice(index, 1)
      },
      refreshForm(){
        this.resetForm('configForm');
        this.getAll()
      },
    }
  }
</script>

<style scoped>
  .config-table {
    margin: 10px;
    /*border: 1px solid #ccc;*/
  }
</style>
